{% extends "element/saas/base.html" %}

{% block meta_title %}地理信息{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <style>
        .ui_city_change_top .ui_city_change_inner {
            height: 30px !important;
            line-height: 30px !important;
        }
    </style>
{% endblock %}

{% block main %}
    <div class="admin-content" style="padding: 5px">
        {#        <input type="text" id="suggestId" placeholder="请输入搜索关键词"/>#}
        {#        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>#}
        <div id="indusymap" style="width: 100%;height: 850px;"></div>
    </div>
{% endblock %}

{% block footer_js %}
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=Q1TgsnImo5xaPGRK5w9bW003Y7XriSKZ"></script>
    <script>
        function G(id) {
            return document.getElementById(id);
        }
        var map = new BMap.Map("indusymap", {minZoom: 11, maxZoom: 19});    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        //添加左上角切换城市工具
        var size = new BMap.Size(10, 10);
        var cityControl = new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: size
        });
        map.addControl(cityControl);
        map.addEventListener("tilesloaded", function () {
            $("#icalert-modal").hide();
            var bs = map.getBounds();   //获取可视区域
            var bssw = bs.getSouthWest();   //可视区域左下角
            var bsne = bs.getNorthEast();   //可视区域右上角
            {#            companyajax(bssw.lng, bssw.lat, bsne.lng, bsne.lat);#}
        });
        var companyajax = function (palng, palat, pblng, pblat) {
            $.ajax({
                type: 'POST',
                url: "/",
                data: {
                    palng: palng,
                    palat: palat,
                    pblng: pblng,
                    pblat: pblat
                },
                success: function (data) {
                    addpoint(data);
                },
                error: function (erroeMsg) {
                    console.log(erroeMsg);
                }
            });

            var addpoint = function (data) {
                for (var k = 0; k < data.length; k++) {
                    (function () {
                        var tags = data[k].keywords, urls = data[k].url;
                        if (data[k].keywords) {
                            tags = '<span class="icmap-tags">标签：' + data[k].keywords + '</span><br />';
                        }
                        if (urls) {
                            urls = '<a href=' + data[k].url + ' class="combtn" title="进入企业主页">详情</a>';
                        }
                        var data_info = [
                            [data[k].lng, data[k].lat, tags + data[k].isListed + "    " + data[k].isHighTech + "    " + data[k].companyScale]
                        ];
                        var opts = {
                            width: 249,     // 信息窗口宽度
                            height: 80,     // 信息窗口高度
                            title: '<h3 class="icmap-title"><a href="javascript:void(0)" title="' + data[k].title + '"class="comtitle">' + data[k].title + urls + '</h3>', // 信息窗口标题
                            enableMessage: true//设置允许信息窗发送短息
                        };

                        for (var i = 0; i < data_info.length; i++) {
                            var myIcon = new BMap.Icon("/static/img/location.png", new BMap.Size(25, 25));
                            var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon: myIcon});  // 创建标注
                            var content = data_info[i][2];
                            map.addOverlay(marker);               // 将标注添加到地图中
                            addClickHandler(content, marker);
                        }
                        function addClickHandler(content, marker) {
                            marker.addEventListener("click", function (e) {
                                        openInfo(content, e)
                                    }
                            );
                        }

                        function openInfo(content, e) {
                            var p = e.target;
                            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                            var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                            map.openInfoWindow(infoWindow, point); //开启信息窗口
                        }
                    })(k)
                }
            }
        };
        // 定义一个控件类,即function
        function StatusControl() {
            // 默认停靠位置和偏移量
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(150, 10);
        }
        // 通过JavaScript的prototype属性继承于BMap.Control
        StatusControl.prototype = new BMap.Control();
        // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
        // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
        StatusControl.prototype.initialize = function (map) {
            // 创建一个DOM元素
            var select = document.createElement("select"),
                    opt1 = document.createElement("option"),
                    opt2 = document.createElement("option"),
                    opt3 = document.createElement("option"),
                    opt4 = document.createElement("option");
            opt1.text = "全部";
            opt2.text = "在营";
            opt3.text = "注销";
            opt4.text = "吊销";
            select.appendChild(opt1);
            select.appendChild(opt2);
            select.appendChild(opt3);
            select.appendChild(opt4);
            select.setAttribute("onchange", constatus);
            function constatus() {
                console.log(this);
            }

            // 添加DOM元素到地图中
            map.getContainer().appendChild(select);
            // 将DOM元素返回
            return select;
        };
        // 创建控件
        var myZoomCtrl = new StatusControl();
        // 添加到地图当中
        map.addControl(myZoomCtrl);
        {#        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象#}
        {#                {#}
        {#                    "input": "suggestId", "location": map#}
        {#                });#}
        {##}
        {#        ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件#}
        {#            var str = "";#}
        {#            var _value = e.fromitem.value;#}
        {#            var value = "";#}
        {#            if (e.fromitem.index > -1) {#}
        {#                value = _value.province + _value.city + _value.district + _value.street + _value.business;#}
        {#            }#}
        {#            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;#}
        {##}
        {#            value = "";#}
        {#            if (e.toitem.index > -1) {#}
        {#                _value = e.toitem.value;#}
        {#                value = _value.province + _value.city + _value.district + _value.street + _value.business;#}
        {#            }#}
        {#            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;#}
        {#            G("searchResultPanel").innerHTML = str;#}
        {#        });#}
        {##}
        {#        var myValue;#}
        {#        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件#}
        {#            var _value = e.item.value;#}
        {#            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;#}
        {#            G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;#}
        {##}
        {#            setPlace();#}
        {#        });#}
        {##}
        {#        function setPlace() {#}
        {#            map.clearOverlays();    //清除地图上所有覆盖物#}
        {#            function myFun() {#}
        {#                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果#}
        {#                map.centerAndZoom(pp, 18);#}
        {#                map.addOverlay(new BMap.Marker(pp));    //添加标注#}
        {#            }#}
        {##}
        {#            var local = new BMap.LocalSearch(map, { //智能搜索#}
        {#                onSearchComplete: myFun#}
        {#            });#}
        {#            local.search(myValue);#}
        {#        }#}
    </script>
    {{ block.super }}
{% endblock %}
